import { Divider, Flex, Image, Skeleton, Tag } from "antd";
import dayjs from "dayjs";
import Xiaohongshu from "@/assets/svg/xiaohongshu.svg?react";
import { ORDER_CONTENT_TYPE_OPTIONS, ORDER_STATUS_OPTIONS } from "@/constants/options";

interface DetailCardProps {
  data: any;
  loading: boolean;
}

export default function DetailCard({ data, loading }: DetailCardProps) {
  if (loading)
    return <Skeleton active className="basis-[400px] h-full bg-white rounded-lg p-4 dark:bg-[#1f1f1f]" />;
  if (!data) return null;
  return (
    <Flex vertical className="basis-[400px] overflow-y-auto bg-white p-4 rounded-lg dark:bg-[#1f1f1f]">
      <h1 className="text-base font-bold mb-2">{data?.title}</h1>
      <Flex justify="space-between" gap={24}>
        <Flex gap={12} align="center">
          <Image src={data?.coverImage} width={240} height={160} preview={false} />
          <Flex vertical gap={24}>
            <Tag color="blue" className="m-0 text-center">
              {data?.contentCategory || "-"}
            </Tag>
            <Tag color={data?.isVisible ? "green" : "red"} className="m-0 text-center">
              {ORDER_STATUS_OPTIONS.find((option) => option.value === data?.isVisible)?.label}
            </Tag>
          </Flex>
        </Flex>
        <Flex justify="center" align="flex-end">
          <Xiaohongshu width={24} height={24} />
        </Flex>
      </Flex>
      <Divider className="my-4" />
      <Flex gap={56} className="font-bold">
        <Flex vertical gap={10}>
          <div className="text-base">达人需求</div>
          <div className="text-lg">{data?.influencerCount || 0}</div>
        </Flex>
        <Flex vertical gap={10}>
          <div className="text-base">已入选</div>
          <div className="text-lg">{data?.selectedCount || 0}</div>
        </Flex>
        <Flex vertical gap={10}>
          <div className="text-base">已报名</div>
          <div className="text-lg">{data?.appliedCount || 0}</div>
        </Flex>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">合作品牌</h1>
        <div className="text-sm text-gray-500">{data?.brand}</div>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">档期要求</h1>
        <div className="text-sm text-gray-500">
          {data?.cooperationStart && data?.cooperationEnd
            ? `${dayjs(data?.cooperationStart).format("YYYY-MM-DD")} 至 ${dayjs(data?.cooperationEnd).format("YYYY-MM-DD")}`
            : ""}
        </div>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">粉丝要求</h1>
        <div className="text-sm text-gray-500">
          {data?.fansMin && data?.fansMax ? `${data?.fansMin}K - ${data?.fansMax}K` : ""}
        </div>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">稿费说明</h1>
        <div className="text-sm text-gray-500">{data?.feeDescription}</div>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">合作形式</h1>
        <div className="text-sm text-gray-500">
          {ORDER_CONTENT_TYPE_OPTIONS.find((option) => option.value === data?.contentType)?.label}
        </div>
      </Flex>
      <Divider className="my-4" />
      <Flex vertical>
        <h1 className="text-lg font-bold">合作详情说明</h1>
        <div className="text-sm text-gray-500">{data?.details}</div>
      </Flex>
    </Flex>
  );
}
